<template>
    <a-card>
        <a-form
                :model="form"
                :labelCol="formItemLayout.labelCol"
                :wrapperCol="formItemLayout.wrapperCol"
                ref="form"
        >
            <a-row class="form-row" :gutter="16">
                <a-col :lg="5" :md="12" :sm="24">
                    <a-form-item label="姓名" name="studentName">
                        <a-input
                                placeholder="请输入姓名"
                                v-model:value="form.studentName"
                        />
                    </a-form-item>
                </a-col>
                <a-col :lg="5" :md="12" :sm="24">
                    <a-form-item label="学号" name="studentNo">
                        <a-input
                                placeholder="请输入学号"
                                v-model:value="form.studentNo"
                        />
                    </a-form-item>
                </a-col>
                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" @click="searchForm">查询</a-button>
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
                </a-form-item>
                <a-form-item v-if="is_Show" :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="link" @click="noShow">收起</a-button>
                </a-form-item>
                <a-form-item v-else :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="link" @click="isShow">展开</a-button>
                </a-form-item>
            </a-row>
            <a-row v-if="is_Show" class="form-row" :gutter="16">
                <a-col :lg="5" :md="12" :sm="24">
                    <a-form-item label="班级" name="className">
                        <a-input
                                placeholder="请输入班级"
                                v-model:value="form.className"
                        />
                    </a-form-item>
                </a-col>
                <a-col :lg="5" :md="12" :sm="24">
                    <a-form-item label="性别" name="gender">
                        <a-input
                                placeholder="请输入性别"
                                v-model:value="form.gender"
                        />
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </a-card>

    <a-card>
        <a-table
        :columns="columns"
        :dataSource="studentList"
        :pagination="paginationOpt"
        :loading="memberLoading"
        >
            <a-pagination v-model:current="current" :total="50" show-less-items />
            <template v-for="(col, i) in ['studentName', 'studentNo', 'className','gender']" v-slot:[col]="{ text, record }" >
                <a-input
                        :key="col"
                        v-if="record.editable"
                        style="margin: -5px 0"
                        :value="text"
                        :placeholder="columns[i].title"
                        @change="e => handleChange(e.target.value, record.key, col)"
                />
                <template v-else>{{ text }}</template>
            </template>
            <template #operation="{ record }" >
                <template v-if="record.editable">
            <span v-if="record.isNew">
              <a @click="saveRow(record)">添加</a>
              <a-divider type="vertical" />
              <a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
                <a>删除</a>
              </a-popconfirm>
            </span>
                    <span v-else>
              <a @click="saveRow(record)">保存</a>
              <a-divider type="vertical" />
              <a @click="cancel(record.key)">取消</a>
            </span>
                </template>
                <span v-else>
            <a @click="toggle(record.key)">编辑</a>

            <a-divider type="vertical" />
            <a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
              <a>删除</a>
            </a-popconfirm>
            <a-divider type="vertical" />
            <a-popconfirm title="没有更多操作">
              <a>更多操作</a>
            </a-popconfirm>
          </span>
            </template>
        </a-table>
        <a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" @click="newMember">
            <template #icon>
                <PlusOutlined />
            </template>
            新增成员
        </a-button>
    </a-card>

</template>
<script>
    import {
        Form,
        Button,
        Input,
        DatePicker,
        Select,
        Row,
        Col,
        Table,
        Divider,
        Card,
        Popover,
        Popconfirm, TimePicker
    } from 'ant-design-vue';
    import {mapState} from "vuex";
    import {CloseCircleOutlined, ExclamationOutlined, PlusOutlined} from "@ant-design/icons-vue";
    import {getStudentPagedList} from "../../../api/student";
    const FormItem = Form.Item;
    const { Option } = Select;
    const { RangePicker } = DatePicker;
    const studentList1 = []

    export default {
        name: 'student',
        created(){
            getStudentPagedList(1,200).then(res=>{
                this.studentList = res.data.data
                this.studentList1 = this.studentList
                console.log(this.studentList)
            })
        },
        components: {
            ARow: Row,
            ACol: Col,
            AForm: Form,
            AButton: Button,
            AInput: Input,
            ARangePicker: RangePicker,
            AFormItem: FormItem,
            ASelect: Select,
            ASelectOption: Option,

            ATable: Table,
            ADivider: Divider,
            ACard: Card,
            APopover: Popover,
            APopconfirm: Popconfirm,
            ATimePicker: TimePicker,
            ExclamationOutlined,
            CloseCircleOutlined,
            PlusOutlined
        },
        props: {
            showSubmit: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            ...mapState({
                collapse: state => state.collapse
            })
        },
        loading: false,
        memberLoading: false,
        data () {
            return {
                studentList: [],
                is_Show: false,
                form: {
                    studentName: '',
                    studentNo: '',
                    className: '',
                    gender: '',
                },
                formItemLayout: {
                    labelCol: { span: 8 },
                    wrapperCol: { span: 16 }
                },
                rules: {
                    studentName: [{ required: true, message: '请输入姓名', whitespace: true}],
                    studentNo: [{ required: true, message: '请输入学号', whitespace: true}],
                },
                columns: [
                    {
                        title: '学生姓名',
                        dataIndex: 'studentName',
                        key: 'studentName',
                        width: '15%',
                        slots: { customRender: 'studentName' }
                    },
                    {
                        title: '学号',
                        dataIndex: 'studentNo',
                        key: 'studentNo',
                        width: '20%',
                        slots: { customRender: 'studentNo' }
                    },
                    {
                        title: '所在班级',
                        dataIndex: 'className',
                        key: 'className',
                        width: '20%',
                        slots: { customRender: 'className' }
                    },
                    {
                        title: '性别',
                        dataIndex: 'gender',
                        key: 'gender',
                        width: '10%',
                        slots: { customRender: 'gender' }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        slots: { customRender: 'operation' }
                    }
                ],
                //分页
                paginationOpt: {
                    defaultCurrent: 1, // 默认当前页数
                    defaultPageSize: 10, // 默认当前页显示数据的大小
                    total: 0, // 总数，必须先有
                    showSizeChanger: true,
                    showQuickJumper: true,
                    pageSizeOptions: ["5", "10", "15", "20"],
                    showTotal: (total) => `共 ${total} 条`, // 显示总数
                }
            }
        },
        methods: {
            handleSubmit (e) {
                e.preventDefault()
            },
            newMember () {
                const length = this.studentList.length;
                this.studentList.push({
                    key: length === 0 ? '1' : (parseInt(this.studentList[length - 1].key) + 1).toString(),
                    studentName: '',
                    studentNo: '',
                    className: '',
                    gender: '',
                    editable: true,
                    isNew: true
                })
            },
            remove (key) {
                const newData = this.studentList.filter(item => item.key !== key);
                this.studentList = newData
            },
            saveRow (record) {
                this.memberLoading = true;
                const { key, studentName, studentNo, className, gender } = record;
                if (!studentName || !studentNo || !className || !gender) {
                    this.memberLoading = false;
                    this.$message.error('请填写完整成员信息。');
                    return
                }
                // 模拟网络请求、卡顿 800ms
                new Promise((resolve) => {
                    setTimeout(() => {
                        resolve({ loop: false })
                    }, 800)
                }).then(() => {
                    const target = this.studentList.find(item => item.key === key);
                    target.editable = false;
                    target.isNew = false;
                    this.memberLoading = false
                });
            },
            isShow(){
                this.is_Show = true;
            },
            noShow(){
                this.is_Show = false;
            },
            toggle (key) {
                const target = this.studentList.find(item => item.key === key);
                target._originalData = { ...target };
                target.editable = !target.editable
            },


            getRowByKey (key, newData) {
                const data = this.studentList;
                return (newData || data).find(item => item.key === key)
            },
            cancel (key) {
                const target = this.studentList.find(item => item.key === key);
                Object.keys(target).forEach(key => { target[key] = target._originalData[key] });
                target._originalData = undefined
            },
            handleChange (value, key, column) {
                const newData = [...this.studentList];
                const target = newData.find(item => key === item.key);
                if (target) {
                    target[column] = value;
                    this.studentList = newData
                }
            },
            //执行查询事件
            searchForm(){
                var _this = this;
                var oneItems = [];
                var twoItems = [];
                var threeItems = [];
                var fourItems = [];
                this.studentList.map(function(item) {
                    if (item.studentName.search(_this.form.studentName) != -1) {
                        oneItems.push(item);
                    }
                });
                oneItems.map(function(item) {
                    if (item.studentNo.search(_this.form.studentNo) != -1) {
                        twoItems.push(item);
                    }
                });
                twoItems.map(function(item) {
                    if (item.className.search(_this.form.className) != -1) {
                        threeItems.push(item);
                    }
                });
                threeItems.map(function(item) {
                    if (item.gender.search(_this.form.gender) != -1) {
                        fourItems.push(item);
                    }
                });
                this.studentList = fourItems
            },
            //重置查询条件
            resetForm() {
                this.$refs.form.resetFields()
                this.studentList = this.studentList1
            },
            scrollToField (fieldKey) {
                const labelNode = document.querySelector(`label[for="${fieldKey}"]`);
                if (labelNode) {
                    labelNode.scrollIntoView(true)
                }
            }
        }
    }

</script>


<style lang="less" scoped>
    .card{
        margin-bottom: 24px;
    }
    .popover-wrapper {
        /deep/ .antd-pro-pages-forms-style-errorPopover .ant-popover-inner-content {
            min-width: 256px;
            max-height: 290px;
            padding: 0;
            overflow: auto;
        }
    }
    .antd-pro-pages-forms-style-errorIcon {
        user-select: none;
        margin-right: 24px;
        color: #f5222d;
        cursor: pointer;
        i {
            margin-right: 4px;
        }
    }
    .antd-pro-pages-forms-style-errorListItem {
        padding: 8px 16px;
        list-style: none;
        border-bottom: 1px solid #e8e8e8;
        cursor: pointer;
        transition: all .3s;

        &:hover {
            background: #e6f7ff;
        }
        .antd-pro-pages-forms-style-errorIcon {
            float: left;
            margin-top: 4px;
            margin-right: 12px;
            padding-bottom: 22px;
            color: #f5222d;
        }
        .antd-pro-pages-forms-style-errorField {
            margin-top: 2px;
            color: rgba(0,0,0,.45);
            font-size: 12px;
        }
    }
</style>

